<template>
  <div class="minepersoninfo-container">
    <div>
        <headersubaction :name="'个人信息'" :action='"noaction"'></headersubaction>
    </div>
    <div class="mui-scroll-wrapper">
      <div class='mui-scroll'>
        <div class="mui-card">
          <div class="mui-card-content mine-content">
            <div class="mui-card-content-inner">
              <ul class="mui-table-view mui-table-view-chevron">
                <li class="mui-table-view-cell mui-media person-item person-headicon">
                  <!-- <a class="mui-navigate-right"> -->
                    <div class="mui-media-body person-left">
                      头像
                    </div>
                    <div class="person-right">
                        <img :src="currentLoginUser.headicon || $imHeadIcon" alt="网络原因,找不到您的头像">
                    </div>
                    <span class="mui-icon mui-icon-arrowright headiconright"></span>
                  <!-- </a> -->
                </li>
                <li class="mui-table-view-cell mui-media person-item">
                  <!-- <a class='mui-navigate-right' href="javascript:;"> -->
                    <div class="mui-media-body person-left">
                      昵称
                    </div>
                    <div class="person-right">
                       <span>{{currentLoginUser.nickname}}</span>
                        <span class="mui-icon mui-icon-arrowright"></span>
                    </div>
                  <!-- </a> -->
                </li>
                <li class="mui-table-view-cell mui-media person-item">
                  <!-- <a class="mui-navigate-right"> -->
                    <div class="mui-media-body person-left">
                      环信号
                    </div>
                    <div class="person-right">
                       <span>{{currentLoginUser.username}}</span>
                    </div>
                  <!-- </a> -->
                </li>
                <li class="mui-table-view-cell mui-media person-item">
                  <!-- <a class="mui-navigate-right"> -->
                    <div class="mui-media-body person-left">
                      二维码名片
                    </div>
                    <div class="person-right">
                        <span>二维码</span>
                        <span class="mui-icon mui-icon-arrowright"></span>
                    </div>
                  <!-- </a> -->
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- <div> -->
      <minepersonheadicon
      :imgSrc='currentLoginUser.headicon'
      class="clickHeadicon"
      :class="{active: showClickheadicon}"
      @hideClickheadiconZi='hideClickheadiconFu'
      ></minepersonheadicon>
    <!-- </div> -->
  </div>
</template>

<script>
import HeaderSubAction from '../public/header/HeaderSubAction.vue'
import MinePersonHeadicon from './MinePersonHeadicon.vue'
import {mapState} from 'vuex'
export default {
    data() {
      return {
        showClickheadicon: false
      }
    },
    components: {
      headersubaction: HeaderSubAction,
      minepersonheadicon: MinePersonHeadicon
    },
    computed: {
      ...mapState(['currentLoginUser'])
    },
    mounted() {
      this.init()
      console.log(this.currentLoginUser, 'ooooooooooooo')
    },
    methods: {
      init() {
        var self = this
        self.$immui.init()
        self.$immui('.minepersoninfo-container').on('tap', '.person-headicon', function(e) {
          // console.log(e, 'oooooo')
          self.showClickheadicon = true
        })
      },
      hideClickheadiconFu() {
        this.showClickheadicon = false
      }
    }
}
</script>

<style lang='scss' scoped>
.minepersoninfo-container{
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 12;
    background: white;
    .person-item{
        height: 80px;
        line-height: 60px;
        display: flex;
        justify-content: space-between;
        padding-right: 10px;
        .person-left{
            flex: 1;
            padding-left: 10px;
        }
        .person-right{
            // flex: 1;
            img{
                height: 58px;
                width: 58px;
            }
        }
        .headiconright{
            line-height: 58px;
            vertical-align: middle;
        }
    }
}
.mui-card{
  margin: 0 0 10px 0 !important;
}
.mui-card-content .mui-card-content-inner{
  padding: 0!important;
}
.mui-scroll-wrapper {
  top: 40px;
  bottom: 53px;
}
.clickHeadicon{
  transition: all .5s ease;
  transform: translateX(100%);
  &.active{
    transform: translateX(0);
  }
}
</style>
